<template>
    <div class="card_box">
        <el-row :gutter="12">
            <el-col :span="isDrawerStatus ? 8 : 6" v-for="(item, index) in localList" :key="`${item.customerid}-${item.customerid_f1}-${item.customerid_f2}`">
                <el-card shadow="always">
                    <div class="flex_row">
                            <div>
                                <img class="avatar" :src="item.avatar" alt="">
                            </div>
                            <div class="ml10">
                                <p class="font_size14 flex_row">
                                   <span class="flex_row"> <i class="el-icon-user mr5" style="color: #303133;"></i>
                                        <div class="ellipsis" style="max-width: 120px;">
                                            {{ item.name || '未知' }}
                                        </div>
                                    </span>
                                   <span class="ml10" v-if="item.cellphone"> <i class="el-icon-phone-outline mr5" style="color: #303133;"></i>{{ item.cellphone || '' }} </span>
                                </p>
                                <p class="">已加入 <span class="ml5 font_green">{{ item.days || '--' }}</span></p>
                                <p class="">分享总人数 <span class="ml5 bold mr5">{{ item.num_1 || 0 }} </span> 人</p>
                            </div>
                        </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>


<!-- {
    "customerid": "68",
    "customerid_f1": "263",
    "customerid_f2": "24",
    "num_1": "0",
    "days": "1356天",
    "name": "王利林1",
    "cellphone": "13928764936",
    "avatar": "https://thirdwx.qlogo.cn/mmopen/vi_32/1XickOhjB7H1lS0ibDqjicILc7xjSekkcVj0rlsmm7JQpx0ARUPwwycB3NOD3yQPMcADxgicm9pvuxqOInzbsHO8sQ/132",
    "share_by": ""
} -->

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        },
        customerId: {
            type: String,
            default: ''
        },
        isDrawerStatus: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            localList: []
        };
    },

    watch: {
        list: {
            handler(newVal) {
                console.log("list changed:", newVal);
                this.localList = newVal;
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        console.log("CustomerRecommend created, initial list:", this.list);
    },
    mounted() {
        console.log("CustomerRecommend mounted, current list:", this.list);
    },

    methods: {
        onClick(item) {
            this.$emit("showFlowDetails", item);
        },
    },
};
</script>

<style lang="scss" scoped>
.card_box {
	::v-deep .el-card__body {
		padding: 10px !important;
	}
}

.avatar {
	height: 70px;
	width: 70px;
	border-radius: 50%;
}

.tp_obj {
	box-sizing: border-box;
	background-color: #f1f4f8;
	padding: 5px 10px;
	border-radius: 5px;
	width: 130px;
	overflow: hidden;
}

.card_box {
	::v-deep .el-col {
		margin-bottom: 12px !important;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
